import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
// Removed useSafeAreaInsets to avoid double status-bar spacing (screens already wrapped in SafeAreaView)
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { Colors } from '../constants/colors';

interface AppHeaderProps {
  title: string;
  showBack?: boolean;
  rightAction?: {
    icon: keyof typeof Ionicons.glyphMap;
    text?: string;
    onPress: () => void;
  };
  // variant: colored (orange) or plain (white)
  variant?: 'colored' | 'plain';
  largeTitle?: boolean;
}

export default function AppHeader({ title, showBack = false, rightAction, variant = 'colored', largeTitle = false }: AppHeaderProps) {
  const navigation = useNavigation();

  const iconColor = variant === 'plain' ? Colors.black : Colors.white;

  return (
    <View style={[
      styles.header,
      // Remove extra top padding to avoid double safe-area spacing; screens already use SafeAreaView
      variant === 'plain' && styles.headerPlain,
    ]}>
      <View style={styles.headerContent}>
        {showBack ? (
          <TouchableOpacity
            onPress={() => navigation.goBack()}
            style={styles.backButton}
          >
            <Ionicons name="arrow-back" size={24} color={iconColor} />
          </TouchableOpacity>
        ) : (
          <View style={styles.backButton} />
        )}

        <Text style={[styles.headerTitle, variant === 'plain' && styles.headerTitlePlain, largeTitle && styles.headerTitleLarge]}>{title}</Text>

        {rightAction ? (
          <TouchableOpacity
            onPress={rightAction.onPress}
            style={styles.rightAction}
          >
            {rightAction.text ? (
              <Text style={[styles.rightActionText, variant === 'plain' && { color: Colors.black }]}>{rightAction.text}</Text>
            ) : (
              <Ionicons name={rightAction.icon} size={24} color={iconColor} />
            )}
          </TouchableOpacity>
        ) : (
          <View style={styles.rightAction} />
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    backgroundColor: Colors.primary,
    elevation: 4,
    shadowColor: Colors.black,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  headerPlain: {
    backgroundColor: Colors.white,
    elevation: 0,
    shadowOpacity: 0,
    borderBottomWidth: 1,
    borderBottomColor: Colors.gray[200],
  },
  headerContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    minHeight: 56,
  },
  backButton: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    flex: 1,
    textAlign: 'center',
    fontSize: 18,
    fontWeight: '600',
    color: Colors.white,
  },
  headerTitlePlain: {
    color: Colors.black,
  },
  headerTitleLarge: {
    fontSize: 24,
    fontWeight: '800',
  },
  rightAction: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  rightActionText: {
    color: Colors.white,
    fontSize: 14,
    fontWeight: '500',
  },
});
